{% extends "base.html" %}
{% block page_title %}C/C++语言代码格式化 - {% endblock %}
{% block page_head %}
<link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
    <style type="text/css">
    .CodeMirror{
        border: 1px solid #ccc
    }
    </style>
{% endblock %}
{% block page_body %}
    <div class="header_container">
        <h1>C/C++语言代码格式化工具</h1>
    </div>
    <div class="page_container">
        <span class="text-primary">
            <strong>温馨提示：</strong>养成一个良好的编码规范，是一个优秀的程序员必备的。
        每个人都有自己的审美，但是因此造成的诸多不良代码习惯，会让代码变得千奇百怪，凌乱，甚至连自己都不知所云。
        而规范的代码，可以让老师、助教在帮助你的时候对你的代码一目了然。
        不要让别人看你的代码的时候像是在受罪，规范自己的代码，你好，我好，大家都好！
        </span>
        <form action="" id="code_formatter" method="post">
            <textarea name="code" id="code-editor" cols="30" rows="10">{{ code }}</textarea><br />
            <button class="btn btn-primary">格式化</button>
        </form>
    </div>
{% endblock %}
{% block page_script %}
    <script type="text/javascript" src="/static/codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="/static/codemirror/mode/clike/clike.js"></script>
    <script type="text/javascript">
    $(function () {
       var editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), {
            indentUnit: 4,
            indentWithTabs: true,
            lineNumbers: true,
            mode: 'text/x-csrc',
            matchBrackets: true,
            showCursorWhenSelecting: true
        });
        editor.setSize("100%", "450px");
    });
    </script>
{% endblock %}